<template>
	<div v-if="details != null">
		<!-- 顶部 -->
		<div>
			<van-nav-bar>
				<template #left>
					<div>
						<van-icon name="arrow-left" @click="onClickLeft()" size="1rem" style="float: left;" />
						<van-image round width="1rem" height="1rem" :src="details.face" style="float: left;" />
					</div>
					<div>
						<font>{{details.nickname}}</font><br />
						<font>{{details.publishTime}}</font>
					</div>
				</template>
			</van-nav-bar>
		</div>
		<!-- 图片 -->
		<div>
			<van-swipe class="picture" indicator-color="white">
				<van-swipe-item>
					<img :src="details.cover" />
				</van-swipe-item>
				<van-swipe-item v-for="p in picture">
					<img :src="p" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 动态标题 -->
		<h4>{{details.title}}</h4>
		<!-- 动态内容 -->
		<span>{{details.momentContent}}</span>
		<!-- 评论 -->
		<h4>{{details.commentNumber}}条评论</h4>
		<div v-for="(c, i) in details.comments">
			<div>
				<van-image round width="3rem" height="3rem" :src="c.face" style="float: left;" />
			</div>
			<div style="float: left;">
				<font>{{c.nickname}}</font><br />
				<font>{{c.commentContent}}</font><br />
				<font>{{c.commentTime}}</font>
			</div>
			<div style="float: right;">
				<van-icon name="like-o" size="1rem" @click="like(i)" />
				<span>{{c.likesNumber}}</span>
			</div>
			<van-divider style="clear: both;" />
		</div>
		<!-- 底部 -->
		<van-divider>The end</van-divider>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				details: null,
				picture: [],
			}
		},
		methods: {
			onClickLeft: () => history.back(),
			like(i){
				this.axios.post("/api/likes/likeComment", {
						userinfoId: 1,
						commentId: this.details.comments[i].id
					})
					.then((res) => {
						if (res.data.code == 200) {
							if (res.data.data == "点赞成功") {
								this.details.comments[i].likesNumber++;
							} else {
								this.details.comments[i].likesNumber--;
							}
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
			}
		},
		mounted() {
			this.axios.get("/api/moment/" + this.$route.query.id)
				.then((res) => {
					console.log(res.data);
					if (res.data.code == 200) {
						this.details = res.data.data;
						var str = res.data.data.picture;
						console.log(typeof str);
						this.picture = str.split(",");
						console.log(this.picture);
					} else {
						this.$toast.fail("网络繁忙请稍后重试")
					}

				})
		}
	}
</script>

<style>
	* {
		text-align: left;
	}

	.picture {
		width: 98%;
	}

	.picture img {
		width: 100%;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.userinfo {}

	font {
		font-size: 0.5rem;
	}
</style>
